<template>
	<el-form class="menuEditForm" ref="menuInfo" :inline="true" :model="menuInfo" label-width="100px">
		<el-form-item label="父级编号">
			<el-cascader style="width: 94%;" ref="tree" :emitPath='false' v-model="menuInfo.menuParentCode" :options="menuTree" :props="props"
			 clearable>
				<template slot-scope="{ node, data }">
					<span>{{ data.menuName }} </span>
					<span v-if="!data.leaf"> ({{ data.children.length }}) </span>
				</template>
			</el-cascader>
		</el-form-item>
		<el-form-item label="菜单编号">
			<el-input v-model="menuInfo.menuCode"></el-input>
		</el-form-item>
		<el-form-item label="菜单名称">
			<el-input v-model="menuInfo.menuName"></el-input>
		</el-form-item>
		<el-form-item label="菜单地址">
			<el-input v-model="menuInfo.menuUrl"></el-input>
		</el-form-item>
		<el-form-item label="菜单标识">
			<el-input v-model="menuInfo.menuLogo"></el-input>
		</el-form-item>
		<el-form-item label="排序">
			<el-input v-model="menuInfo.menuOrder"></el-input>
		</el-form-item>
		<el-form-item label="是否启用">
			<el-switch v-model="menuInfo.menuEnable"  :active-value="active"
			 :inactive-value="inactive">
			</el-switch>
		</el-form-item>
		<el-form-item label="">
		</el-form-item>
		<el-form-item style="width: 500px;" label="菜单类型">
			<el-radio-group v-model="menuInfo.menuType" size="small">
			      <el-radio-button label="0">按钮</el-radio-button>
			      <el-radio-button label="1">菜单</el-radio-button>
			      <el-radio-button label="2">内部链接</el-radio-button>
			      <el-radio-button label="3">外部链接</el-radio-button>
			    </el-radio-group>
		</el-form-item>
		<el-form-item label="参数设置" style="width: 300px;">
			<vue-json-editor :showBtns="false" :mode="'code'" lang="zh_cn" v-model="menuInfo.menuParamsJson"
				style="width: 600px;" />
		</el-form-item>
	</el-form>
</template>
<script>
	import request from '@/utils/request'
	import vueJsonEditor from 'vue-json-editor'
	import JsonEditor from '@/components/JsonEditor'
	export default {
		name: 'menuEdit',
		props: ['menuInfo'],
		components: {
			JsonEditor,
			vueJsonEditor
		},
		data() {
			return {
				//所有的下拉选项
				options: {},
				active: 1,
				inactive: 0,
				props: {
					checkStrictly: true,
					value: "menuCode",
					label: "menuName",
					leaf: "leaf",
					multiple: false,
					emitPath: false
				},
				menuTree: []
			}
		},
		created() {
			this.getMenuTree();
		},
		watch: {
			menuInfo: function(val) {
				debugger

			}
		},
		methods:{
			getMenuTree(){
				request({
					url: '/system/menu/queryTree',
					method: 'post',
					data: {}
				}).then(response => {
					this.menuTree = response.data
				})
			}
		}
	}
</script>
<style>
	.menuEditForm .el-form-item {
		width: 45%;
	}

	.menuEditForm .el-input {
		width: 100%;
	}
</style>
